<template>
  <div class="head">
    <div class="left">
      <span v-dj @click="change" id="test1">
        <span class="el-icon-s-fold button" v-if="isShow"></span>
      </span>
      <span
        @click="change"
        class="el-icon-s-unfold button"
        v-if="!isShow"
      ></span>
      <span>{{ $t("i18n.backSystem") }}</span>
      <span class="title" @click="push('/title1/system')" :class="{active: module == 'title1'}">菜单一</span>
      <span class="title" @click="push('/title2/2-menu1')" :class="{active: module == 'title2'}">菜单二</span>
      <span class="title" @click="push('/title3/3-menu1')" :class="{active: module == 'title3'}">菜单三</span>
    </div>
    <div class="right">
      <span @click="allScreen" id="test2"
        ><i class="el-icon-full-screen screen"></i
        >{{ isAllScreen ? $t("i18n.exitScreen") : $t("i18n.allScreen") }}</span
      >
      <span class="bell">
        <router-link to="/option" class="bell-color"
          ><el-tooltip
            effect="dark"
            :content="no_read ? `有${no_read}条未读消息` : `消息中心`"
            placement="bottom"
          >
            <i class="el-icon-message-solid"></i>
          </el-tooltip>
          <span class="dotted"></span>
        </router-link>
      </span>

      <el-image :src="this.username.img" class="img"></el-image>
      <span>{{ this.username.Admin }}</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // module  导航
      module:'/title1',
      // 未读消息
      no_read: 1,
      isAllScreen: false,
      // aside 中的折叠与否
      isCollase: true,
      // head 中 方法的控制切换
      isChange: true,
      // 控制按钮的切换
      isShow: true,
      //接收用户信息
      message: {
        name: "ddd",
      },
      // 判断是否接收到数据，接收到了则渲染
      isSend: true,
    };
  },
  //设置一个自定义指定，用来加载的时候，就触发其点击
  directives: {
    dj: {
      // 要想要自定义指令有效，要用到inserted！！！！！
      inserted: function (el) {
        el.click();
      },
    },
  },
  computed: {
    username() {
      let name = JSON.parse(localStorage.getItem("message")) || {
        img: "/img/head.d8562467.jpeg",
      };
      return name;
    },
   
  },
  watch:{
    $route:'setHeadActive'
  },
  methods: {
    // 全屏触发
    allScreen() {
      let element = document.documentElement;
      if (this.isAllScreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.isAllScreen = !this.isAllScreen;
    },
  // 路由发生改变就触发
    setHeadActive(){
      let path = this.$route.path.split('/')
      console.log(path[1]);
      this.module= path[1]
    }
    ,
    //切换展开或折叠
    change() {
      if (this.isChange) {
        this.open();
      } else {
        this.close();
      }
    },
    open() {
      // 这个是内容
      this.$bus.$emit("open");
      //这个是控制侧边栏
      this.$bus.$emit("aside-open");

      this.isChange = !this.isChange;

      this.isShow = !this.isShow;
    },
    close() {
      // 这个是内容
      this.$bus.$emit("close");
      //这个是控制侧边栏
      this.$bus.$emit("aside-close");
      this.isChange = !this.isChange;
      this.isShow = !this.isShow;
    },
    // 切换菜单
  push(path){
    if(this.module == path){
      console.log(111);
      console.log(this.module);
    }
    else{
      this.$router.push(path)
    }
  }
  },
  mounted(){
    this.setHeadActive()
  }
};
</script>

<style scoped>
.active{
  color: red;
}
.title {
  margin-left: 50px;
}
.bell {
  position: relative;
}

.bell-color {
  color: white;
}
.dotted {
  position: absolute;
  background-color: rgb(235, 3, 3);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  top: 37%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.img {
  width: 40px;
  height: 40px;
  display: inline-block;
  border-radius: 50%;
  vertical-align: middle;
  margin: 0 10px;
}
.screen {
  margin-right: 15px;
  color: cyan;
  font-weight: 900;
}
.right {
  padding-right: 20px;
}
.head {
  width: 100%;
  height: 80px;
  display: flex;
  line-height: 80px;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 10px;
  background-color: #242f42;
  color: white;
  font-size: 22px;
}

span {
  display: inline-block;
  margin: 0 0 0 10px;
  /* 不能选中文字 */
  user-select: none;
}
</style>